<!-- OrderList 订单列表 -->
<template>
  <div class="content">
    <el-form :model="query" ref="form" label-width="100px" size="medium" class="search-form">
      <el-form-item label="创建时间：" prop="timeRange">
        <TimeRangePicker v-model="query.timeRange" type="datetimerange" :defaultTime="['00:00:00', nowHMS]"
                         startPlaceholder="开始时间" endPlaceholder="结束时间"></TimeRangePicker>
      </el-form-item>
      <el-form-item label="关键字：">
        <el-input style="width:300px;" v-model="query.keyword" placeholder="请输入订单编号/购买人/购买人电话" @keyup.enter.native="handleSearch">
        </el-input>
      </el-form-item>
      <el-form-item label="收货人：" prop="receiverNamePhone">
        <el-input v-model="query.receiverNamePhone" placeholder="请输入收货人姓名/手机号码" @keyup.enter.native="handleSearch"></el-input>
      </el-form-item>

      <el-form-item label="实付金额：" prop="payAmountRange">
        <InputNumber v-model="query.payAmountRange"></InputNumber>
      </el-form-item>

      <el-form-item label="实付积分：" prop="payIntegrationRange">
        <InputNumber v-model="query.payIntegrationRange"></InputNumber>
      </el-form-item>

      <!-- <el-form-item label="品牌：" prop="brandName">
        <BrandName placeholder="请输入品牌名称" @getBrandName="getBrandName"></BrandName>
      </el-form-item> -->

      <!-- <el-form-item label="订单状态：" prop="keyword">
        <el-select v-model="query.status" placeholder="请选择订单状态" clearable>
          <el-option label="所有订单" :value="9"></el-option>
          <el-option label="待付款" :value="0"></el-option>
          <el-option label="待发货" :value="1"></el-option>
          <el-option label="待收货" :value="2"></el-option>
          <el-option label="已完成" :value="3"></el-option>
          <el-option label="已关闭" :value="4"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label-width="10px">
        <Cbutton @click="handleSearch" :btnloading="tableLoading">查询</Cbutton>
        <Cbutton @click="handleExport" :btnloading="exportLoading">订单导出</Cbutton>
        <!-- 订单数据导入 -->
        <UploadData @getUploadResult="getUploadResult"></UploadData>
      </el-form-item>
    </el-form>

    <div class="content-container">
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="所有订单" :name="'9'"></el-tab-pane>
        <el-tab-pane label="待付款" :name="'0'"></el-tab-pane>
        <el-tab-pane label="待发货" :name="'1'"></el-tab-pane>
        <el-tab-pane label="待收货" :name="'2'"></el-tab-pane>
        <el-tab-pane label="已完成" :name="'3'"></el-tab-pane>
        <el-tab-pane label="已关闭" :name="'4'"></el-tab-pane>
      </el-tabs>
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit stripe highlight-current-row
                empty-text="没有符合条件的订单" @sort-change="sortTableData">
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class="order-item-detail-goods-box">
              <div class="order-item-detail-goods-single" v-for="(item,index) in props.row.items" :key="item.id">
                <el-divider v-if="index > 0"></el-divider>
                <el-row>
                  <el-col :span="8">
                    <div class="goods-img-and-title-box">
                      <span class="goods-img-box">
                        <el-image class="product-img-small" fit="contain" :src="item.productPic"></el-image>
                      </span>
                      <span class="goods-title-box">{{item.productName}}</span>
                    </div>
                  </el-col>
                  <el-col :span="16">
                    <div class="goods-num-and-price-box">
                      <p>
                        <span>规格</span>
                        <span>单价</span>
                        <span>实价</span>
                        <span>积分单价</span>
                        <span>购买数量</span>
                      </p>
                      <p>
                        <span>{{item.sp1 ? item.sp1:''}}{{item.sp2 ? ','+item.sp2:''}}{{item.sp3 ? ',' + item.sp3: ''}}</span>
                        <span>￥{{item.productPrice}}</span>
                        <span>￥{{item.realAmount}}</span>
                        <span>{{item.productIntegration}}</span>
                        <span>{{item.productQuantity}}</span>
                      </p>
                    </div>
                  </el-col>
                  <!-- <el-col :span="6">
                    买家备注：{{props.row.note}}
                  </el-col> -->
                </el-row>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column prop="orderSn" label="订单编号" align="center" min-width="140"></el-table-column>
        <el-table-column prop="shopName" label="商铺" align="center" min-width="110"></el-table-column>
        <el-table-column prop="nickName" label="购买用户" align="center" min-width="110"></el-table-column>
        <el-table-column prop="phone" label="购买用户电话" align="center" min-width="110"></el-table-column>
        <el-table-column prop="receiverName" label="收货人" align="center"></el-table-column>
        <el-table-column prop="receiverPhone" label="收货人电话" align="center" min-width="110"></el-table-column>
        <!-- <el-table-column prop="totalAmount" label="订单总金额" align="center"></el-table-column> -->
        <el-table-column prop="payAmount" label="应付金额" sortable align="center" min-width="110"></el-table-column>
        <el-table-column prop="payIntegration" label="应付积分" sortable align="center" min-width="110"></el-table-column>
        <el-table-column prop="payType " label="支付方式" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.payType === 0">未支付</template>
            <template v-else-if="scope.row.payType === 1">支付宝</template>
            <template v-else-if="scope.row.payType === 2">微信</template>
            <template v-else-if="scope.row.payType === 3">积分</template>
            <template v-else>其他</template>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center" min-width="160">
          <template slot-scope="scope">
            {{ dealListStr(scope.row.status, 'orderStatusList') + retundStatusStr(scope.row)}}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable align="center" min-width="160">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | glbTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="note" label="买家备注" align="center" min-width="160"></el-table-column>
        <el-table-column prop="sallerNote" label="卖家备注" align="center" min-width="160">
          <!-- <template slot-scope="scope">
            <span>{{scope.row.sallerNote}}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="200" align="center">
          <template slot-scope="props">
            <el-link type="primary" @click="gotoDetailById(props.row.orderId)">查看详情</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" @click="handleOrderNote(props.row)">卖家备注</el-link>
            <template v-if="props.row.status === 1 && props.row.refundStatus === 1">
              <el-divider direction="vertical"></el-divider>
              <el-link type="success" @click="handleSend(props.row)">发货</el-link>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
      </Pagination>
    </div>

  </div>
</template>

<script>
import { ExportList, ExportStr, NowDateTime } from '@/utils'
import ExcelPort from '@/utils/excelPort'
import { GetOrderList, OrderNote, OrderExportExcel } from '@/api/order'
// import OrderDelivery from './delivery'
// import BrandName from '@/components/Brand'
import InputNumber from '@/components/InputNumber'
import TimeRangePicker from '@/components/DatePicker/TimeRangePicker'
import UploadData from '@/components/Upload/uploadData'
import { mapGetters } from 'vuex'

export default {
  name: 'OrderList',
  components: { InputNumber, TimeRangePicker, UploadData },
  data () {
    return {
      activeName: '9',
      nowHMS: NowDateTime(),
      query: {
        timeRange: [],
        payAmountRange: [],
        payIntegrationRange: [],
        status: 9,
        keyword: '',
        receiverNamePhone: '',
        brandName: '',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableSelectList: [],
      tableLoading: false,
      exportLoading: false,
      orderStatusList: ExportList('orderStatusList'),
      deliveryDialogVisible: false,
      deliveryData: {}
    } // return
  },
  props: {},
  watch: {},
  computed: {
    ...mapGetters([
      'routerParams'
    ])
  },
  created () {
    if (this.routerParams['$pageName'] === this.$route.name) {
      this.activeName = this.routerParams.activeName
      this.query.status = this.activeName
      this.query.pageNum = this.routerParams.pageNum
      this.query.pageSize = this.routerParams.pageRow
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    handleTabClick (val) {
      this.query.pageNum = 1
      this.query.status = val.name
      this.getList()
    },
    getList () {
      this.tableLoading = true
      let params = this.getFiltersParams()
      GetOrderList(params).then(res => {
        this.tableLoading = false
        const data = res.data
        this.tableList = data.list
        this.totalCount = data.total
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSearch () {
      this.handleClearSort()
      this.query.pageNum = 1
      this.getList()
    },
    handleOrderNote (row) {
      this.$prompt('请输入备注', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: 'textarea',
        inputPlaceholder: '备注不得超过100字',
        inputPattern: /^[\s\S]{0,100}$/,
        inputErrorMessage: '备注不得超过100字',
        inputValue: row.sallerNote
      }).then(({ value }) => {
        let params = {
          orderId: row.orderId,
          sallerNote: value
        }
        OrderNote(params).then(res => {
          this.getList()
        }).catch(e => { })
      }).catch(() => {
      })
    },
    handleExport () {
      let params = this.getFiltersParams()
      params.download = 1 // 下载：0不下载/1下载
      this.exportLoading = true
      OrderExportExcel(params).then(res => {
        this.exportLoading = false
        const data = res.data
        ExcelPort(data.vistUrl)
      }).catch(e => {
        this.exportLoading = false
        this.$message.error(e.message || '订单导出失败！')
      })
    },
    getFiltersParams () {
      let params = {}
      if (this.query.timeRange && this.query.timeRange.length > 1) {
        params.createTimeSt = this.query.timeRange[0]
        params.createTimeEn = this.query.timeRange[1]
      }
      if (this.query.payAmountRange && this.query.payAmountRange.length > 1) {
        params.payAmountSt = this.query.payAmountRange[0]
        params.payAmountEn = this.query.payAmountRange[1]
      }
      if (this.query.payIntegrationRange && this.query.payIntegrationRange.length > 1) {
        params.payIntegrationSt = this.query.payIntegrationRange[0]
        params.payIntegrationEn = this.query.payIntegrationRange[1]
      }
      params.pageNum = this.query.pageNum
      params.pageSize = this.query.pageSize
      params.status = this.query.status
      params.keyword = this.query.keyword
      params.receiverNamePhone = this.query.receiverNamePhone
      params.brandName = this.query.brandName
      params.orderBy = this.query.orderBy
      params.sort = this.query.sort
      return params
    },
    sortTableData ({ column, prop, order }) {
      // column 列属性 prop 排序字段 order[descending, ascending] 升降序
      this.query.orderBy = prop
      if (order) {
        this.query.sort = order.indexOf('asc') > -1 ? 'asc' : 'desc'
      } else {
        this.query.sort = ''
      }
      this.query.page = 1
      this.getList()
    },
    // 清除排序
    handleClearSort () {
      this.$refs.tableData.clearSort()
      this.query.orderBy = ''
      this.query.sort = ''
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    },
    dealListStr (key, type) {
      return ExportStr(key, type)
    },
    retundStatusStr (val) {
      const confirmStatus = {
        0: '未确认',
        1: '客户签收', // 已确认
        2: '自动签收' // 已确认自动签收
      }
      const closedStatus = {
        1: '手动取消订单',
        2: '超时自动取消',
        3: '退款关闭',
        4: '退货退款关闭'
      }
      const retundStatusStatus = {
        1: '正常',
        2: '申请退款',
        4: '申请退货退款',
        5: '退款完成',
        6: '退货中',
        7: '退货退款完成',
        8: '退货待填物流',
        9: '退货退款失败）'
      }
      if (val.status === 4) {
        return `(${closedStatus[val.closedStatus]})`
      } else if (val.status === 1 && val.refundStatus !== 1) {
        return `(${retundStatusStatus[val.refundStatus]})`
      } else if (val.status === 3) {
        return `(${confirmStatus[val.confirmStatus]})`
      } else {
        return ''
      }
    },
    handleSend (row) {
      this.$store.dispatch('setPageRouterParams', {
        $pageName: this.$route.name,
        activeName: this.activeName,
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize,
        pageRow: this.query.pageSize
      })
      this.$router.push({ name: 'pms:order:delivery', query: { id: row.orderId } })
    },
    gotoDetailById (id) {
      if (!id) {
        this.$message({
          type: 'warning',
          message: '商品信息错误，请刷新页面后重试'
        })
        return
      }
      this.$store.dispatch('setPageRouterParams', {
        $pageName: this.$route.name,
        activeName: this.activeName,
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize,
        pageRow: this.query.pageSize
      })
      this.$router.push({ name: 'pms:order:detail', query: { id } })
    },
    getOprResult (val) {
      if (val) {
        this.getList()
      }
    },
    getBrandName (val) {
      this.query.brandName = val
    },
    getUploadResult (val) {
      if (val) {
        this.getList()
      }
    }

  }
}

</script>
<style lang='scss' scoped>
.order-item-detail-goods-single .goods-img-box {
  width: 10%;
  img {
    max-width: 100%;
    min-height: 100%;
  }
}
.order-item-detail-goods-single .goods-title-box {
  width: 85%;
  margin-left: 3%;
  .product-img-small {
    width: 70px;
    height: 70px;
  }
}

.goods-img-and-title-box > span,
.goods-num-and-price-box > span {
  display: inline-block;
  vertical-align: middle;
}
.goods-num-and-price-box span {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 100px;
}
</style>
